<template>
	<div class="echarts-box" style="width: 100%; height: 100%">
		<Echart :options="options" id="barChart1"></Echart>
	</div>
</template>

<script>
import { graphic } from "echarts";

export default {
	data() {
		return {
			options: {},
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			this.options = {
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(0,0,0,.6)",
					borderColor: "rgba(147, 235, 248, 0)",
					textStyle: {
						color: "#FFF",
					},
					// axisPointer: {
					// 	type: "shadow",
					// 	label: {
					// 		show: true,
					// 	},
					// },
				},
				grid: {
					left: "10%",
					top: "5%",
					right: "5%",
					bottom: "15%",
				},
				xAxis: {
					data: [
						"宜宾第五初级中学",
						"王场初级中学",
						"商周镇小学",
						"凉水井中学",
						"正兴中学",
						"文昌中学",
						"富加中学",
					],
					axisLine: {
						show: true, //隐藏X轴轴线
						lineStyle: {
							color: "#163a5f",
							width: 2,
						},
					},
					axisTick: {
						show: false, //隐藏X轴刻度
						alignWithLabel: true,
					},
					axisLabel: {
						show: true,
						color: "#ddd", //X轴文字颜色
						fontSize: 12,
						interval: 0,
						formatter: function (value) {
							var ret = ""; //拼接加\n返回的类目项
							var maxLength = 4; //每项显示文字个数
							var valLength = value.length; //X轴类目项的文字个数
							var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
							if (rowN > 1) {
								//如果类目项的文字大于5,
								for (var i = 0; i < rowN; i++) {
									var temp = ""; //每次截取的字符串
									var start = i * maxLength; //开始截取的位置
									var end = start + maxLength; //结束截取的位置
									//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
									temp = value.substring(start, end) + "\n";
									ret += temp; //凭借最终的字符串
								}
								return ret;
							} else {
								return value;
							}
						},
					},
				},
				yAxis: [
					{
						splitArea: { show: false },
						type: "value",
						name: "",
						nameTextStyle: {
							color: "#ddd",
							fontSize: 12,
						},

						splitLine: {
							show: false,
							lineStyle: {
								color: "rgba(255, 255, 255, 0.15)",
								// type: 'dashed', // dotted 虚线
							},
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: true, //隐藏X轴轴线
							lineStyle: {
								color: "#163a5f",
								width: 1,
							},
						},
						axisLabel: {
							show: true,
							color: "#ddd",
							fontSize: 12,
						},
					},
					{
						type: "value",
						splitArea: { show: false },
						name: "",
						nameTextStyle: {
							color: "#ddd",
							fontSize: 12,
						},
						splitLine: {
							show: false,
							lineStyle: {
								width: 1,
								color: "#CED2DB",
							},
						},
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false, //隐藏X轴轴线
							lineStyle: {
								color: "#163a5f",
								width: 2,
							},
						},
						axisLabel: {
							show: false,
							color: "#797A7F",
							fontSize: 12,
						},
					},
				],
				series: [
					{
						name: "下载数",
						type: "bar",
						barWidth: 15,
						itemStyle: {
							// color: new graphic.LinearGradient(0, 0, 0, 1, [
							//    {
							//       offset: 0,
							//       color: "#00A2FF",
							//    },
							//    {
							//       offset: 1,
							//       color: "#00CCD2",
							//    },
							// ]),
							color: {
								type: "linear",
								x: 0, //右
								y: 0, //下
								x2: 0, //左
								y2: 1, //上
								colorStops: [
									{
										offset: 0.1,
										color: "#13D5FC", // 0% 处的颜色
									},
									{
										offset: 1,
										color: "#2059B8", // 100% 处的颜色
									},
								],
							},
							borderRadius: [20, 20, 20, 20],
						},
						label: {
							show: true,
							position: "top",
							distance: 0,
							color: "#1ACDDC",
							formatter: "{c}" + "次",
						},
						data: [63, 99, 65, 85, 75, 78, 55],
					},
					{
						// name: '背景',
						type: "bar",
						barWidth: "15px",
						xAxisIndex: 0,
						yAxisIndex: 1,
						barGap: "-110%",
						data: [100, 100, 100, 100, 100, 100, 100], //背景阴影长度
						itemStyle: {
							color: "rgba(255,255,255,0.039)",
							borderRadius: [20, 20, 20, 20],
						},
						tooltip: {
							show: false,
						},
						zlevel: 9,
					},
				],
			};
		},
	},
};
</script>

<style lang="scss" scoped></style>
